<template>
	<view class="my-order">
		<view class="head-box" id="head-box">
			<scroll-view class="head" scroll-x="true" :scroll-left="offsetLeft" scroll-with-animation="true">
				<view class="item head-item" v-for="(item, index) in menuList" :key="item.id"
					:class="{ active: activeIndex === index }" @click="handleActive(item.id, index)">
					{{ item.title }}
					<view class="line"></view>
				</view>
			</scroll-view>
		</view>
		<view class="data-list" v-if="orderList.length">
			<card v-for="item in orderList" :key="item.id" :item="item" :list="list"></card>
		</view>
		<view class="no-data" v-else>
			<image src="@/static/images/noGoods.jpg" class="null"></image>
			<view class="null-content">您还没有相关订单</view>
			<view class="toIndex" @click="toIndex">去逛逛</view>
		</view>
	</view>
</template>
<script>
	import card from "./child/card.vue";
	import menuList from "@/common/my-goods-order/menuList.js";
	export default {
		name: "myorder",
		data() {
			return {
				menuList,
				activeIndex: 0,
				offsetLeft: 0,
				headItemNodesWidth: [],
				countWidth: 0,
				orderList: [],
				params: {
					page: 1,
					pageSize: 8,
					order_status: 0,
				},
				isLoading: false,
				isNoMore: false,
				headHeight: 0,
				id: 0,
			}
		},
		components: {
			card,
		},
		onLoad(options) {
			this.id = options.id;
			this.activeIndex = options.active * 1;
			uni.$on("deleteItem", this.freshenList);
			this.list = uni.getStorageSync('uniqueCode');
		},
		created() {
			this.getAllNode();
		},
		mounted() {
			this.getHeadNode();

			setTimeout(() => {
				this.handleActive(this.id, this.activeIndex);
			}, 200)
		},
		methods: {
			//取消订单移除一项
			freshenList(id) {
				console.log(id,'111111freshenList');
				const index = this.orderList.findIndex(item => item.id === id);
				if (index !== -1) this.orderList.splice(index, 1);
			},
			getHeadNode() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#head-box').boundingClientRect(data => {
					this.headHeight = data.height;
				}).exec();
			},
			toIndex() {
				uni.switchTab({
					url: '/pages/index/index',
				});
			},
			getOrderData(id = 0) {
				if (this.isLoading || this.isNoMore) return;
				this.isLoading = true;
				uni.showLoading({
					title: "Loading",
					mask: true,
				})
				if (id) this.params.order_status = id * 1;
				uni.$http.post('/Wechat/Order/orderList', this.params)
					.then(res => {
						if (res.statusCode === 500) {
							uni.removeStorageSync("tel");
							uni.removeStorageSync("token");
							uni.removeStorageSync("userInfo");
							uni.$showMsg('当前登录信息过期');
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/my/my",
								})
							}, 2000)
						}
						if (res.data.status === 300) {
							uni.$showMsg('您还未登录，请先登录');
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/my/my",
								})
							}, 2000)
						} else if (res.data.status === 200) {
							const data = res.data.data.data;
							if (data.length < this.params.pageSize) {
								this.isNoMore = true;
							} else {
								this.params.page++;
							}
							this.orderList.push(...data);
							console.log(this.orderList);
						}
					}).finally(() => {
						this.isLoading = false;
						uni.hideLoading();
					})
			},
			//设置x轴滚动距离
			setOffset() {
				//设置当前x轴位置
				this.offsetLeft = this.countWidth / 2;
				//重置计算出来的宽度(选中index前面元素的宽度)
				this.countWidth = 0;
			},
			getAllNode() {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.head-item').boundingClientRect(data => {
					data.forEach(item => {
						this.headItemNodesWidth.push(item.width);
					})
				}).exec();
			},
			handleActive(id, index) {
				this.activeIndex = index;
				if (index > menuList.length * 0.75) {
					this.countWidth = 10000;
				} else if (index > menuList.length * 0.25) {
					this.headItemNodesWidth.forEach((val, key) => {
						if (key < index) this.countWidth += val;
					});
				} else {
					this.countWidth = 0;
				}
				this.setOffset();
				this.resetRequest();
				this.getOrderData(id)
			},
			resetRequest() {
				this.orderList.splice(0);
				this.params.page = 1;
				this.params.pageSize = 8;
				this.params.order_status = 0;
				this.isNoMore = false;
				this.isLoading = false;
			},
		},
		onReachBottom() {
			this.getOrderData();
		}
	}
</script>
<style lang="scss" scoped>
	.my-order {

		.head-box {
			padding: 0 20rpx;
			padding-top: 20rpx;
			height: 80rpx;
			box-sizing: border-box;
			width: 750rpx;
			position: fixed;
			top: 0;
			left: 0;
			background-color: white;
			z-index: 100;

			.head {
				white-space: nowrap;
				width: 100%;

				.item {
					display: inline-block;
					flex-shrink: 0;
					padding-right: 40rpx;
					padding-bottom: 16rpx;
					border-bottom: 6rpx solid transparent;
					position: relative;

					&:last-of-type {
						padding-right: 0;

						.line {
							width: 100%;
						}
					}

					&.active {
						color: red;
						font-weight: bold;

						.line {
							transform: scale(1);
						}
					}

					.line {
						position: absolute;
						width: calc(100% - 40rpx);
						height: 6rpx;
						bottom: 0;
						left: 0;
						background-color: red;
						transition: all .5s;
						transform: scale(0);
						transform-origin: center center;
					}
				}
			}
		}

		.data-list {
			margin-top: 80rpx;
			background-color: #f7f7f7;
			padding: 20rpx;
			min-height: calc(100vh - 80rpx);
			box-sizing: border-box;
		}

		.no-data {
			min-height: 100vh;
			background-color: white;

			.null {
				width: 100%;
				margin-top: 100rpx;
			}

			.null-content {
				text-align: center;
				color: #bababa;
				font-size: 25rpx;
			}

			.toIndex {
				color: #ffffff;
				background-color: red;
				padding: 10rpx 20rpx;
				width: 20%;
				text-align: center;
				border-radius: 15px;
				margin: 10rpx auto 0;
			}
		}
	}
</style>